<template>
  <div class="page_body">
    <HomeTop :topTitle="topTitle"></HomeTop>
    <div class="page">
      <div class="page_banner">
        <img
          v-if="record.image != ''"
          class="banner_img"
          :src="record.image_path"
          alt=""
        />
        <img
          v-else
          class="banner_img"
          src="../../assets/image/game_children.png"
          alt=""
        />
      </div>
      <div class="page_title">
        <div class="page_title_box">
          <div class="title">{{ record.title }}</div>
          <div class="time">
            {{ record.start_date }}
          </div>
        </div>
      </div>
      <div class="page_detail">
        <van-tabs v-model="selected">
          <van-tab title="简介">
            <div>
              <div
                class="mag"
                v-html="record.introduce"
                style="padding: 0.3rem"
              ></div>
            </div>
          </van-tab>
          <van-tab title="赛程">
            <div>
              <div
                class="schedule"
                v-html="record.detail"
                style="padding: 0.3rem"
              ></div>
            </div>
          </van-tab>
          <van-tab title="参赛队">
            <div>
              <div class="team">
                <div
                  class="teamList"
                  v-for="(item, index) in teamList"
                  :key="index"
                  @click="listgeam(item.team_id)"
                >
                  <img
                    v-if="item.image_path"
                    class="teamImg"
                    :src="item.image_path"
                    alt=""
                  />
                  <div v-else class="empty">暂无图片</div>
                  <div class="jias">
                    <div class="teamIntro">
                      <div class="teamName">{{ item.name }}</div>
                      <div class="teamNum">{{ item.player_count }}人</div>
                    </div>
                    <div class="teamIntro_but">
                      <van-button
                        class="operjshe"
                        plain
                        type="info"
                        @click="listgeam(item.team_id)"
                      ></van-button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="team" v-if="this.teamList.length == 0">
                暂无参赛队伍
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
      <div style="height: 1.8rem"></div>
    </div>
    <div class="page_btn">
      <button class="btn" @click="goApply()">报名</button>
    </div>
    <van-dialog
      v-model="show"
      title="请去完善信息"
      width="5.2rem"
      @confirm="confirm"
      :closeOnClickOverlay="true"
    >
    </van-dialog>
  </div>
</template>

<style src="../../assets/css/game/uDetails.css" scoped></style>

<script>
import HomeTop from "@/components/homeTop.vue";
import { TabContainer, TabContainerItem } from "mint-ui";
import { Indicator, Toast } from "mint-ui";
import { Tab, Tabs, Dialog, Button } from "vant";

export default {
  name: "uDetails",
  components: {
    HomeTop,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Dialog.Component.name]: Dialog.Component,
    [Button.name]: Button,
  },
  data() {
    return {
      topTitle: "", // 顶部组件参数设置
      record: {}, //详情信息
      selected: "1", // t,ab选中值
      swipeable: true, // tab切换动画开启
      teamList: [], //队伍列表
      show: false,
    };
  },
  //   created(){},
  mounted() {
    this.eventDetail();
    this.getEventTeam();
  },
  methods: {
    goApply() {
      let url = "/mobile/checkUserInfo";
      Indicator.open();
      this.axios
        .post(url)
        .then((res) => {
          Indicator.close();
          if (res.code == 0) {
            sessionStorage.setItem("is_complete", res.is_complete); // 是否完善信息

            if (res.is_complete == "2") {
              this.$router.push({
                name: "chooseTeam",
              });
            } else if (res.is_complete == "1") {
              // Toast({
              //   message: "请去教练员系统完善信息",
              //   duration: 3000,
              // });
              this.show = true;
            }
          } else {
            Toast({
              message: res.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          console.log(error);
        });
    },
    listgeam(id) {
      this.$router.push({
        name: "teamInformation",
        query: {
          id: id,
        },
      });
    },
    confirm() {
      this.$router.push({
        name: "eventImprove",
      });
    },
    eventDetail() {
      let url = "/mobile/eventDetail";
      let data = {
        event_id: this.$route.query.id,
      };
      Indicator.open();
      this.axios
        .post(url, data)
        .then((res) => {
          Indicator.close();
          if (res.code == 0) {
            this.record = res.record;
            // this.teamList = res.goods
          }
        })
        .catch(function (error) {
          Indicator.close();
          console.log(error);
        });
    },
    getEventTeam() {
      let url = "/mobile/getEventTeam";
      let data = {
        event_id: this.$route.query.id,
      };
      Indicator.open();
      this.axios
        .post(url, data)
        .then((res) => {
          Indicator.close();
          if (res.code == 0) {
            this.teamList = res.team;
          }
        })
        .catch(function (error) {
          Indicator.close();
          console.log(error);
        });
    },
  },
};
</script>
<style >
.operjshe {
  background: url("../../assets/image/gend.png") no-repeat;
  background-size: 30% 30% !important;
  border: none !important;
}
.van-tabs__line {
  background-color: #26a2ff !important;
}
</style>
